<template>
  <div>
    <!-- --------------------------------搜索框----------------------------- -->
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input
            v-model="query.roleName"
            placeholder="角色名"
            :clearable="true"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="loadRoles"
            >搜索</el-button
          >
          <el-button type="success" @click="dialog.addShow = true"
            >新建</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- -----------------------------分页显示数据--------------------------------------- -->
    <el-table :data="roleList" border style="width: 100%">
      <el-table-column type="index" width="50" label="序号"> </el-table-column>
      <el-table-column prop="id" label="角色ID" width="180"> </el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="180">
      </el-table-column>
      <!-- 0正常 1停用 -->
      <el-table-column prop="status" label="状态"> </el-table-column>
      <el-table-column prop="remark" label="备注"> </el-table-column>

      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-popconfirm
            title="这是一段内容确定删除吗？"
            @confirm="handleDelete(scope.row.id)"
          >
            <el-button
              type="danger"
              slot="reference"
              size="mini"
              icon="el-icon-delete"
              >删除</el-button
            >
          </el-popconfirm>
          <!-- <el-button
            type="danger"
            size="mini"
            icon="el-icon-user-solid"
            @click="queryMenu(scope.row.id)"
            >分配权限2</el-button
          > -->
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-menu"
            @click="assignProm(scope.row.id)"
            >分配权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currentPage"
      :page-sizes="pageInfo.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>

    <!-- ------------------------------------新增操作------------------------------------ -->
    <el-dialog title="提示" :visible.sync="dialog.addShow" width="30%">
      <el-form ref="addForm" :model="addRole" label-width="80px">
        <el-form-item
          label="角色名"
          :label-width="formLabelWidth"
          prop="roleName"
        >
          <el-input v-model="addRole.roleName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="addRole.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="addRole.status"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.addShow = false">取 消</el-button>
        <el-button type="primary" @click="(dialog.addShow = false), add()"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- ------------------------------------编辑操作------------------------------------ -->
    <el-dialog title="提示" :visible.sync="dialog.updateShow" width="30%">
      <el-form ref="updateForm" :model="updateRole" label-width="80px">
        <el-form-item
          label="角色名"
          :label-width="formLabelWidth"
          prop="roleName"
        >
          <el-input v-model="updateRole.roleName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="updateRole.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="updateRole.status"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.addShow = false">取 消</el-button>
        <el-button type="primary" @click="(dialog.addShow = false), update()"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- ------------------------------------给用户分配权限操作------------------------------------ -->
    <!-- <el-dialog title="用户授权" :visible.sync="dialog.menuShow" width="30%">
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="(menu, index) in menuList" :key="index" :label="menu.id">{{menu.menuName}}</el-checkbox>        
      </el-checkbox-group>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.menuShow = false">取 消</el-button>
        <el-button type="primary" @click="assignMenu(scope.row.id)">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      addRole: {},
      updateRole: {},
      dialog: {
        addShow: false,
        updateShow: false,
        menuShow: false,
      },
      checkList: [],
      menuList: [],
      roleList: [],
      pageInfo: {
        total: 0, //总条数
        pageSizes: [5, 10, 20, 50],
      },
      query: {
        roleName: "",
        currentPage: 1, //当前页
        pageSize: 5, //每页显示的条数
      },
      formLabelWidth: "100px",
    };
  },
  methods: {
    assignProm(rid) {
      this.$router.push({ path: "/system/permission", query: { rid: rid } });
    },

    // queryMenu(uid) {
    //   this.dialog.menuShow = true;
    //   this.$axios.get("/roles/queryMenuNameByName/"+uid)
    //   .then(res=>{
    //     this.menuList = res.data.data.menuList;//得到系统所有的角色
    //     this.checkList = res.data.data.checkList;//得到当前用户拥有的角色
    //   })
    // },

    // 分页方法
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.loadRoles();
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.loadRoles();
    },
    //分页查询数据
    loadRoles() {
      this.$axios.post("/roles/queryAll", this.query).then((res) => {
        this.roleList = res.data.data.list; //返回当前页数据
        this.pageInfo.total = res.data.data.total; //返回一共有多少条数据
      });
    },
    add() {
      this.$axios.post("/roles/", this.addRole).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.dialog.addShow = false; //关于模态框
          this.$refs.addForm.resetFields(); //清空表单数据
          //this.addUser={};
          this.loadUsers(); //重新加载数据
        } /*
        else {
          this.$message.error(res.data.message);
        }
         */
      });
    },

    handleEdit(id) {
      this.$axios.get("/roles/queryById/" + id).then((res) => {
        this.updateRole = res.data.data.role;
        this.dialog.updateShow = true; //显示模态框
      });
    },

    handleDelete(id) {
      this.$axios.delete("/roles/" + id).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.loadRoles(); //重新加载数据
        }
        /*
        else {
          this.$message.error(res.data.message);
        }
        */
      });
    },

    update() {
      this.$axios.put("/roles/update/", this.updateRole).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.dialog.updateShow = false; //关于模态框
          this.loadRoles(); //重新加载数据
        }
        /*
        else {
          this.$message.error(res.data.message);
        }
        */
      });
    },
  },
  mounted() {
    this.loadRoles();
  },
};
</script>